<template>
  <el-form
    ref="formRef"
    :model="formData"
    :rules="formRules"
    :disabled="type === 'detail'"
    :hide-required-asterisk="type === 'detail'"
    label-width="100px"
  >
    <el-form-item label="字典名称" prop="name">
      <el-input
        v-model="formData.name"
        placeholder="请输入字典名称"
      />
    </el-form-item>
    <el-form-item label="字典编码" prop="code">
      <el-input
        v-model="formData.code"
        placeholder="请输入字典编码"
      />
    </el-form-item>
    <el-form-item label="字典描述">
      <el-input
        v-model="formData.description"
        placeholder="请输入字典描述"
      />
    </el-form-item>
  </el-form>
</template>

<script setup>
const props = defineProps({
  selectedRow: {
    type: Object,
    default: () => ({})
  },
  type: {
    type: String,
    default: ''
  }
})

const formRef = ref()

// 表单数据
const formData = reactive({
  id: undefined,
  name: '',
  code: '',
  description: ''
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入字典名称', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入字典编码', trigger: 'blur' }
  ]
}

watch(() => props.selectedRow, (newVal) => {
  if (newVal) {
    for (const key in formData) {
      formData[key] = newVal[key]
    }
  }
}, { deep: true, immediate: true })
</script>
